<!--消息中心-->
<script src="../../../config/config.ts"></script>
<div class="wrapper-xls w100 h100">
  <div class="top-line">
    <div class="w-7 fl-l">
      <div [ngClass]="{'tab-item-active':messType === 0}" class="tab-item" (click)="tabClick(0)">
        全部消息（{{counts.topicCount}}）
      </div>
      <div [ngClass]="{'tab-item-active':messType === 2}" class="tab-item" (click)="tabClick(2)">
        审批消息（{{counts.approveCount}}）
      </div>
      <div [ngClass]="{'tab-item-active':messType === 1}" class="tab-item" (click)="tabClick(1)">
        其他消息（{{counts.otherCount}}）
      </div>
      <div [ngClass]="{'tab-item-active':messType === 3}" class="tab-item" (click)="tabClick(3)">
        系统消息（{{counts.systemCount}}）
      </div>
    </div>
    <div class="fl-r text-right wrapper-xs" style="width: 30%">
      <nz-select class="m-r-sm" style="width: 80px" nzShowSearch nzAllowClear nzPlaceHolder="请选择"
                 (ngModelChange)="selFn($event)" [(ngModel)]="stateSelValue">
        <nz-option *ngFor="let option of infoStateList; let i = index" [nzLabel]="option.value"
                   [nzValue]="option.key"></nz-option>
      </nz-select>
      <button [hidden]="!hasSend" class="fl-r" nz-button nzType="primary" (click)="newSend()">发布消息</button>
      <nz-input-group [nzSuffix]="suffixIconSearch">
        <input type="text" [(ngModel)]="searchName" nz-input placeholder="请输入查找内容" (keyup)="search($event)"/>
      </nz-input-group>
      <ng-template #suffixIconSearch>
        <i nz-icon type="search" (click)="searchClick()"></i>
      </ng-template>
    </div>
  </div>
  <div class="news-content">
    <div class="f-all">
      <div class="card-news" [hidden]="list.length === 0" *ngFor="let item of list">
        <div class="check-lab fl-l">
          <label nz-checkbox [(nzChecked)]="mapOfInfoCheckedId[item.id]" [(ngModel)]="item.checked"
                 (ngModelChange)="check()"></label>
        </div>
        <div class="tu-yuan fl-l">
          <div class="bord-tu" *ngIf="item.messType === 2">
            <img *ngIf="item.grade === 0" src="assets/img/newsType/shenpi1.png" alt="">
            <img *ngIf="item.grade === 1" src="assets/img/newsType/shenpi2.png" alt="">
            <img *ngIf="item.grade === 2" src="assets/img/newsType/shenpi3.png" alt="">
          </div>
          <div class="bord-tu" *ngIf="item.messType === 3">
            <img *ngIf="item.grade === 0" src="assets/img/newsType/shezhi1.png" alt="">
            <img *ngIf="item.grade === 1" src="assets/img/newsType/shezhi2.png" alt="">
            <img *ngIf="item.grade === 2" src="assets/img/newsType/shezhi3.png" alt="">
          </div>
          <div class="bord-tu" *ngIf="item.messType === 1">
            <img *ngIf="item.grade === 0" src="assets/img/newsType/level1.png" alt="">
            <img *ngIf="item.grade === 1" src="assets/img/newsType/level2.png" alt="">
            <img *ngIf="item.grade === 2" src="assets/img/newsType/level3.png" alt="">
          </div>
          <div class="point" title="未读" [hidden]="item.hasRead === 1"></div>
        </div>
        <div class="right-news fl-l">
          <div class="news-hei">
            <div class="news-left fl-l spance">
              <div>
                <span [innerHTML]="item.title" (click)="newsClick(item)" class="cursor"></span>
              </div>
            </div>
            <div class="news-right fl-l">
              {{item.gmtCreate ? (item.gmtCreate| date:'yyyy-MM-dd HH:mm:ss') : '-'}}
            </div>
          </div>
          <div class="news-left fl-l" style="position: relative">
            <div [innerHtml]="item.content| html" (click)="newsClick(item)"
                 class="cursor after-hover spance contentspan"></div>
            <span style="color: #0ed4fe;cursor: pointer;display: inline-block;position: absolute;padding: 0 10px;"
                  *ngIf="item.redirectUrl" (click)="clickJump(item)">
                          <span *ngIf="item.redirectUrl=== 'tch_safety_exam'">查看考试</span>
                          <span *ngIf="item.redirectUrl=== 'tch_safety_learn_task'">查看任务</span>
               <span *ngIf="item.redirectUrl=== 'tch_classroom_learn_task'">查看任务</span>
                          <span *ngIf="item.redirectUrl=== 'tch_ask_leave_approve'">前往审批</span>
                          <span *ngIf="item.redirectUrl=== 'tch_ask_leave_view'">查看请假</span>
                          <span *ngIf="item.redirectUrl=== 'personal_subscribe_view'">查看预约</span>
                          <span *ngIf="item.redirectUrl=== 'team_subscribe_view'">查看预约</span>
                          <span *ngIf="item.redirectUrl=== 'tch_repeal_approve'">前往审批</span>
                          <span *ngIf="item.redirectUrl=== 'tch_subscribe_approve'">前往审批</span>
                          <span *ngIf="item.redirectUrl=== 'tch_break_promise_personal_view'">前往查看</span>
                          <span *ngIf="item.redirectUrl=== 'tch_break_promise_team_view'">前往查看</span>
                         <span *ngIf="item.redirectUrl=== 'stu_break_promise_personal_view'">前往查看</span>
                          <span *ngIf="item.redirectUrl=== 'stu_break_promise_team_view'">前往查看</span>
                          <i nz-icon nzType="double-right" nzTheme="outline"></i>
                        </span>
          </div>
        </div>
      </div>
      <div class="h100 w100 just-center" [hidden]="list.length !== 0">
        <nz-empty></nz-empty>
      </div>
      <div class="w100 fl-l m-t-sm m-b-sm" [hidden]="list.length === 0">
        <div class="fl-l">
          <button class="m-r-sm" nz-button nzType="primary" (click)="allRead()">全部已读</button>
          <button class="m-r-sm" nz-button nzType="default" [disabled]="!isCkecked"
                  (click)="signRead('signRead')">
            标记已读
          </button>
          <button class="m-r-sm" nz-button nzType="default" [disabled]="!isCkecked"
                  (click)="signRead('signUnread')">
            标记未读
          </button>
          <button nz-button nzType="default"
                  nz-popconfirm
                  nzOkType="danger"
                  nzTitle="确定删除所选消息吗?"
                  (nzOnConfirm)="delete()"
                  *ngIf="messType === 1"
                  [disabled]="!isCkecked"
                  nzPlacement="top"
          >删除
          </button>
        </div>
        <div class="fl-r text-right">
          <ng-template #totalTemplate let-total>总共 {{ pageInfo.totalRecords ? pageInfo.totalRecords : 0 }}条
          </ng-template>
          <nz-pagination [nzPageIndex]="pageInfo.first"
                         [nzPageSize]="pageInfo.rows"
                         [nzShowSizeChanger]="true"
                         [nzPageSizeOptions]="[10,20,30,50]"
                         (nzPageIndexChange)="pageInfo.first = $event;page(pageInfo)"
                         (nzPageSizeChange)="pageInfo.rows = $event;page(pageInfo)"
                         [nzTotal]="pageInfo.totalRecords"
                         [nzShowTotal]="totalTemplate"
                         nzShowQuickJumper></nz-pagination>
        </div>
      </div>
    </div>
  </div>
</div>
<!--发布消息弹窗-->
<nz-modal [(nzVisible)]="isModalSend"
          nzWidth="1055px"
          [nzTitle]="modalTitle1"
          [nzContent]="modalContent1"
          (nzOnCancel)="isModalSend = false"
          [nzFooter]="footModel1"
          nzMaskClosable="false"
>
  <ng-template #modalTitle1>
    <span>发布消息</span>
  </ng-template>
  <ng-template #modalContent1>
    <div class="modal-hei over-y over-x-hid">
      <div class="w100 h100" *ngIf="!isShowModalContent">
        <div class="w100 line-4">
          <div class="w-1 fl-l text-right">接收人：</div>
          <div class="w-9 fl-l">
            <nz-radio-group [(ngModel)]="addNews.receiverType">
              <label nz-radio nzValue="1">所有用户</label>
              <label nz-radio nzValue="2">所有老师</label>
              <label nz-radio nzValue="3">所有学生</label>
              <label nz-radio nzValue="4">自定义</label>
            </nz-radio-group>
            <button nz-button nzType="default" [hidden]="addNews.receiverType !== '4'" (click)="choose()">
              选择
            </button>
          </div>
        </div>
        <div class="w100 line-4">
          <div class="w-1 fl-l">&nbsp;</div>
          <div class="w-9 fl-l">
            <div class="kuai spance">
              <span *ngIf="addNews.receiverType === '1'">所有用户</span>
              <span *ngIf="addNews.receiverType === '2'">所有老师</span>
              <span *ngIf="addNews.receiverType === '3'">所有学生</span>
              <span *ngIf="addNews.receiverType === '4'">
                {{checkNames}}
              </span>
            </div>
          </div>
        </div>
        <div class="w100 line-5">
          <div class="w-1 fl-l text-right">通知类型：</div>
          <div class="w-4 fl-l">
            <nz-radio-group [(ngModel)]="addNews.eject">
              <label nz-radio nzValue="1">弹窗</label>
              <label nz-radio nzValue="0">消息</label>
            </nz-radio-group>
          </div>
          <div class="w-1 fl-l text-right">重要程度：</div>
          <div class="w-4 fl-l">
            <nz-radio-group [(ngModel)]="addNews.grade">
              <label nz-radio nzValue="0">普通</label>
              <label nz-radio nzValue="1">警告</label>
              <label nz-radio nzValue="2">严重</label>
            </nz-radio-group>
          </div>
        </div>
        <div class="w100">
          <div class="w-1 fl-l text-right">内容：</div>
          <div class="w-9 fl-l">
            <div>
              <umeditor
                [(ngModel)]="addNews.content"
                [config]="'assets/umeditor/umeditor.config.js'"
                [path]="'assets/umeditor/'"
                [loadingTip]="'加载中……'"
              ></umeditor>
            </div>
          </div>
        </div>
      </div>
      <!--      选择接收人-->
      <div class="w100 h100" *ngIf="isShowModalContent">
        <nz-tabset>
          <nz-tab nzTitle="老师" (nzClick)="tabMoadalClick(1)">
            <div class="searchDiv">
              <label>
                <span>姓名：</span>
                <input nz-input [(ngModel)]="searchCodeParam.name" placeholder="请输入"/>
              </label>
              <label>
                <span>工号：</span>
                <input nz-input [(ngModel)]="searchCodeParam.code" placeholder="请输入"/>
              </label>
              <label>
                <button nz-button style="margin-right:10px" nzType="primary" (click)="clickSearch(1)">
                  查询
                </button>
                <button nz-button nzType="default" (click)="resetSearch(1)">重置</button>
              </label>
            </div>
            <div class="w100 m-t-sm">
              <nz-table
                nzBordered
                [nzData]="teacherList"
                [nzFrontPagination]="false"
                [nzShowPagination]="true"
                [nzPageIndex]="teacherPageInfo.first"
                [nzTotal]="teacherPageInfo.totalRecords"
                [nzPageSize]="teacherPageInfo.rows"
                [nzLoadingDelay]="1"
                [nzPageSizeOptions]="[10,20,30,50,100]"
                [nzShowQuickJumper]="true"
                [nzShowSizeChanger]="true"
                (nzPageIndexChange)="teacherPageInfo.first = $event;pageTeacher(teacherPageInfo)"
                (nzPageSizeChange)="teacherPageInfo.rows = $event;pageTeacher(teacherPageInfo)"
                (nzCurrentPageDataChange)="currentPageDataChange($event,1)"
                [nzScroll]="{y:'300px'}"
              >
                <thead>
                <tr>
                  <th class="tableCheck"
                      nzWidth="50px"
                      nzShowCheckbox
                      [(nzChecked)]="isAllCheck"
                      [nzIndeterminate]="isIndeterminate"
                      (nzCheckedChange)="checkAll($event,1)"
                  ></th>
                  <th nzWidth="120px">姓名</th>
                  <th>工号</th>
                  <th nzWidth="150px" nzCustomFilter>
                    部门
                    <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false"
                                 nzTableFilter
                                 #dropdown>
                      <i
                        nz-icon
                        nzType="search"
                        class="ant-table-filter-icon"
                        [class.ant-table-filter-open]="dropdown.nzVisible"
                        nz-dropdown
                      ></i>
                      <div class="search-box w12">
                        <input type="text" nz-input placeholder="请输入部门"
                               [(ngModel)]="searchDepart"/>
                        <button nz-button nzSize="small" nzType="primary"
                                (click)="searchByDepart()"
                                class="search-button">
                          搜索
                        </button>
                        <button nz-button nzSize="small" (click)="resetDepart()">重置</button>
                      </div>
                    </nz-dropdown>
                  </th>
                  <th nzWidth="100px"
                      nzShowFilter
                      [nzFilters]="filterPositionArr"
                      (nzFilterChange)="filterSome($event, 'position')"
                  >职务
                  </th>
                  <th nzWidth="120px"
                      nzShowFilter
                      [nzFilters]="filterTitleArr"
                      (nzFilterChange)="filterSome($event, 'title')"
                  >职称
                  </th>
                  <th
                    nzWidth="120px"
                    nzShowFilter
                    [nzFilters]="filterTypeArr"
                    (nzFilterChange)="filterSome($event,'type')"
                  >岗位类型
                  </th>
                  <th
                    nzWidth="120px"
                    nzShowFilter
                    [nzFilters]="filterWorkTypeArr"
                    (nzFilterChange)="filterSome($event, 'workType')"
                  >任职类型
                  </th>
                  <th
                    nzWidth="70px"
                    nzShowFilter
                    [nzFilters]="filterSexArr"
                    (nzFilterChange)="filterSome($event,'sex')"
                  >性别
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let data of teacherList">
                  <td
                    nzShowCheckbox
                    [(nzChecked)]="mapOfCheckedId[data.id]"
                    (nzCheckedChange)="refreshStatus(1)"
                  ></td>
                  <td>{{ data.name ? data.name : '' }}</td>
                  <td>{{ data.number ? data.number : ''}}</td>
                  <td>{{ data.orgName ? data.orgName : ''}}</td>
                  <td>{{ data.position ? data.position : ''}}</td>
                  <td>{{ data.title ? data.title : ''}}</td>
                  <td>{{ transformPType(data.type)}}</td>
                  <td>{{ data.workType ? data.workType : ''}}</td>
                  <td>{{ transformSex(data.sex)}}</td>
                </tr>
                </tbody>
              </nz-table>
            </div>
          </nz-tab>
          <nz-tab nzTitle="学生" (nzClick)="tabMoadalClick(2)">
            <div class="searchDiv">
              <label>
                <span>姓名：</span>
                <input nz-input [(ngModel)]="searchCodeParam.name" placeholder="请输入"/>
              </label>
              <label>
                <span>学号：</span>
                <input nz-input [(ngModel)]="searchCodeParam.code" placeholder="请输入"/>
              </label>
              <label>
                <button nz-button style="margin-right:10px" nzType="primary" (click)="clickSearch(2)">
                  查询
                </button>
                <button nz-button nzType="default" (click)="resetSearch(2)">重置</button>
              </label>
            </div>
            <div class="w100 m-t-sm">
              <nz-table
                nzBordered
                [nzData]="studentList"
                [nzFrontPagination]="false"
                [nzShowPagination]="true"
                [nzPageIndex]="studentPageInfo.first"
                [nzTotal]="studentPageInfo.totalRecords"
                [nzPageSize]="studentPageInfo.rows"
                [nzLoadingDelay]="1"
                [nzPageSizeOptions]="[10,20,30,50,100]"
                [nzShowQuickJumper]="true"
                [nzShowSizeChanger]="true"
                (nzPageIndexChange)="studentPageInfo.first = $event;pageStudent(studentPageInfo)"
                (nzPageSizeChange)="studentPageInfo.rows = $event;pageStudent(studentPageInfo)"
                (nzCurrentPageDataChange)="currentPageDataChange($event,2)"
                [nzScroll]="{y:'300px'}"
              >
                <thead nzSingleSort="false">
                <tr>
                  <th class="tableCheck"
                      nzWidth="50px"
                      nzShowCheckbox
                      [(nzChecked)]="studentIsAllCheck"
                      [nzIndeterminate]="studentIsIndeterminate"
                      (nzCheckedChange)="checkAll($event,2)"
                  ></th>
                  <th nzWidth="100px">姓名</th>
                  <th nzWidth="120px">学号</th>
                  <th
                    nzShowFilter
                    [nzFilters]="filterCollegeArr"
                    (nzFilterChange)="filterSomeStu($event,'collegeId')"
                  >
                    学院
                  </th>
                  <th nzWidth="150px" nzCustomFilter>专业
                    <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false"
                                 nzTableFilter
                                 #dropdown>
                      <i
                        nz-icon
                        nzType="search"
                        class="ant-table-filter-icon"
                        [class.ant-table-filter-open]="dropdown.nzVisible"
                        nz-dropdown
                      ></i>
                      <div class="search-box w12">
                        <input type="text" nz-input placeholder="请输入专业名称" #majar/>
                        <button nz-button nzSize="small" nzType="primary"
                                (click)="titleSearch('majorName',majar.value)"
                                class="search-button">
                          搜索
                        </button>
                        <button nz-button nzSize="small"
                                (click)="resetFilter('majorName');majar.value = ''">重置
                        </button>
                      </div>
                    </nz-dropdown>
                  </th>
                  <th nzWidth="150px" nzCustomFilter>班级
                    <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false"
                                 nzTableFilter
                                 #dropdown>
                      <i
                        nz-icon
                        nzType="search"
                        class="ant-table-filter-icon"
                        [class.ant-table-filter-open]="dropdown.nzVisible"
                        nz-dropdown
                      ></i>
                      <div class="search-box w12">
                        <input type="text" nz-input placeholder="请输入班级名称" #cla/>
                        <button nz-button nzSize="small" nzType="primary"
                                (click)="titleSearch('name',cla.value)"
                                class="search-button">
                          搜索
                        </button>
                        <button nz-button nzSize="small"
                                (click)="resetFilter('name');cla.value = ''">重置
                        </button>
                      </div>
                    </nz-dropdown>
                  </th>
                  <th
                    nzWidth="60px"
                    nzShowFilter
                    [nzFilters]="filterSexArr"
                    (nzFilterChange)="filterSomeStu($event,'sex')"
                  >性别
                  </th>
                  <th
                    nzShowFilter
                    nzWidth="120px"
                    [nzFilters]="filterTypeArrStudent"
                    (nzFilterChange)="filterSomeStu($event, 'type')"
                  >学生类型
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let data of studentList">
                  <td
                    nzShowCheckbox
                    [(nzChecked)]="studentMapOfCheckedId[data.id]"
                    (nzCheckedChange)="refreshStatus(2)"
                  ></td>
                  <td>{{ data.name ? data.name : '' }}</td>
                  <td>{{ data.number ? data.number : ''}}</td>
                  <td>{{ data.collegeName ? data.collegeName : ''}}</td>
                  <td>{{ data.majorName ? data.majorName : ''}}</td>
                  <td>{{ data.className ? data.className : ''}}</td>
                  <td>{{ transformSex(data.sex)}}</td>
                  <td>{{ transformType(data.type)}}</td>
                </tr>
                </tbody>
              </nz-table>
            </div>
          </nz-tab>
          <nz-tab nzTitle="班级" (nzClick)="tabMoadalClick(3)">
            <div class="modal-left">
              <label style="margin-bottom: 10px">
                <b>学院/专业</b>
              </label>
              <nz-tree [nzData]="treeNodes" nzShowLine="false" (nzClick)="nzEvent($event)"></nz-tree>
            </div>
            <div class="modal-right">
              <div class="searchDiv">
                <label>
                  <b>班级管理</b>
                </label>
                <label>
                  <span>班级名称：</span>
                  <input nz-input [(ngModel)]="className" placeholder="请输入"/>
                </label>
                <label>
                  <button nz-button style="margin-right:10px" nzType="primary"
                          (click)="searchClass()">查询
                  </button>
                  <button nz-button nzType="default" (click)="resetSearchClass()">重置</button>
                </label>
              </div>
              <div class="w100 m-t-sm">
                <nz-table
                  nzBordered
                  [nzData]="classList"
                  [nzFrontPagination]="false"
                  [nzShowPagination]="true"
                  [nzPageIndex]="classPageInfo.first"
                  [nzTotal]="classPageInfo.totalRecords"
                  [nzPageSize]="classPageInfo.rows"
                  [nzLoadingDelay]="1"
                  [nzPageSizeOptions]="[10,20,30,50,100]"
                  [nzShowQuickJumper]="true"
                  [nzShowSizeChanger]="true"
                  (nzPageIndexChange)="classPageInfo.first = $event;pageClass(classPageInfo)"
                  (nzPageSizeChange)="classPageInfo.rows = $event;pageClass(classPageInfo)"
                  (nzCurrentPageDataChange)="currentPageDataChange($event,3)"
                  [nzScroll]="{y:'300px'}"
                >
                  <thead>
                  <tr>
                    <th class="tableCheck"
                        nzWidth="50px"
                        nzShowCheckbox
                        [(nzChecked)]="classIsAllCheck"
                        [nzIndeterminate]="classIsIndeterminate"
                        (nzCheckedChange)="checkAll($event,3)"
                    ></th>
                    <th nzWidth="120px">年级</th>
                    <th>班级名称</th>
                    <th nzWidth="120px">班长</th>
                    <th nzWidth="150px">班长联系电话</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr *ngFor="let data of classList">
                    <td
                      nzShowCheckbox
                      [(nzChecked)]="classMapOfCheckedId[data.id]"
                      (nzCheckedChange)="refreshStatus(3)"
                    ></td>
                    <td>{{data.schoolYear}}</td>
                    <td>{{data.name}}</td>
                    <td>{{data.monitor}}</td>
                    <td>{{data.telphone}}</td>
                  </tr>
                  </tbody>
                </nz-table>
              </div>
            </div>
          </nz-tab>
        </nz-tabset>
      </div>
    </div>
  </ng-template>
  <ng-template #footModel1>
    <button nz-button nzType="default" [hidden]="isShowModalContent" (click)="isModalSend = false">取消</button>
    <button nz-button nzType="primary" (click)="sendInfo()" [hidden]="isShowModalContent">发布</button>
    <button nz-button nzType="default" [hidden]="!isShowModalContent" (click)="sureCancel()">取消</button>
    <button nz-button nzType="primary" (click)="sureCheck()" [hidden]="!isShowModalContent" [disabled]="canDelete">
      确定
    </button>
  </ng-template>
</nz-modal>
<!--查看消息-->
<nz-modal
  [(nzVisible)]="isShowDetail"
  [nzTitle]="assignTitle"
  [nzContent]="assignContent"
  [nzFooter]="assignFooter"
  (nzOnCancel)="closeFn('signRead')"
  nzMaskClosable="false"
  nzWidth="580"
>
  <ng-template #assignTitle>
    <span style="font-size: 14px;">{{lookNews.title}}</span>
  </ng-template>
  <ng-template #assignContent>
    <div class="modal-hei over-y">
      <p style="overflow: hidden;">
        <span style="float:left;">发布人：{{lookNews ? lookNews.senderName : ''}}</span>
        <span style="float: right;">{{lookNews ? (lookNews.gmtCreate| date:'yyyy-MM-dd HH:mm:ss') : '-'}}</span>
      </p>
      <div class="assignContent" [innerHTML]="lookNews.content | html"></div>
    </div>
  </ng-template>

  <ng-template #assignFooter>
    <button nz-button nzType="default" (click)="closeFn('signRead')">关闭</button>
  </ng-template>
</nz-modal>
